<template>
  <div>

    <!--  -->
    <el-container>
      <el-header style="height:80px">
        <div class="right">
          <div class="font">
            <p>HAPPY</p>
            <p class="cla">MMALL</p>

          </div>
          <el-dropdown @command="back">
            <span class="el-dropdown-link">
              欢迎 {{name}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="260px" style="z-index:1">
          <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#2b2e33" text-color="#fff" active-text-color="#40B6FF" router>
            <el-menu-item index="/home" style="height:70px; line-height: 70px; font-size:18px ; ">
              <i class="el-icon-document"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-menu-item style="height:70px; line-height: 70px; font-size:18px;"  disabled>
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>商品</span>
                <i class="el-icon-arrow-down ok"></i>
              </template>
            </el-menu-item>
            <el-menu-item index="/Goods" style="height:70px; line-height: 70px; font-size:18px;">
              <template slot="title">
                <i class="el-icon-s-data"></i>
                <span>商品管理</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/categroy" style="height:70px; line-height: 70px; font-size:18px;">
              <template slot="title">
                <i class="el-icon-platform-eleme"></i>
                <span>品类管理</span>
                
              </template>
            </el-menu-item>
            <el-menu-item style="height:70px; line-height: 70px; font-size:18px;"  disabled>
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>订单</span>
                <i class="el-icon-arrow-down ok"></i>
              </template>
            </el-menu-item>

            <el-menu-item index="/Order" style="height:70px; line-height: 70px; font-size:18px;">
              <template slot="title">
                <i class="el-icon-s-claim"></i>
                <span>订单管理</span>
              </template>
            </el-menu-item>
            <el-menu-item style="height:70px; line-height: 70px; font-size:18px;" disabled>
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>用户</span>
                <i class="el-icon-arrow-down ok"></i>
              </template>
            </el-menu-item>
            <el-menu-item index="/users" style="height:70px; line-height: 70px; font-size:18px;">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>用户管理</span>
              </template>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>
<script>
export default {
  data() {
    return {
      name: localStorage.getItem("username")
    };
  },
  methods: {
    back() {
      localStorage.removeItem("username");
      this.$router.push("/");
    }
  }
};
</script>
<style lang="scss" scoped>
.el-header {
  padding: 0;
  background-color: #fff;
  color: #333;
  line-height: 80px;
}
.el-aside {
  height: 90vh;
  background-color: #2b2e33;
  // color: #333;
  //
  // line-height: 200px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  // text-align: center;
  height: 90vh;
}
.el-menu {
  border: 0;
}

.right {
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .font {
    position: relative;
    padding-left: 20px;
    width: 260px;
    background: #000;
    color: #2dafcb;
    font-size: 40px;
    font-weight: 700;
    // text-align: center;
    background: rgba(15, 15, 18, .85);
    .cla {
      position: absolute;
      top: 45px;
      left: 20px;
      color: #fff;
      z-index: 9999;
    }
  }
}
.ok{
  float: right;
  line-height: 70px;
}
</style>
